<template>
  <div class="box">
    <div class="con">
      <h1 style="margin-top:20px;margin-left:80px;">舆情监控系统后台管理-IT营</h1>
      <p style="margin-top:20px;margin-left:80px;"><strong>用户名 : </strong><a-input style="width:300px;" v-model="from.username" /></p>
      <p style="margin-top:20px;margin-left:80px;"><strong>&emsp;密码 : </strong><a-input style="width:300px;" v-model="from.password" /></p>
      <p style="margin-top:20px;margin-left:80px;"><strong>验证码 : </strong><a-input style="width:150px;" v-model="from.verify" /></p>
      <p class="img" @click="getSvgImg" v-html="svgImg"></p>
      <img style="margin-top:20px;margin-left:135px;" @click="getLogin" src="../assets/login_btn.jpg" alt="">
    </div>
  </div>
</template>

<script>
import login from '../api/login';
import loginApi from "../api/login"
export default {
  data() {
    return {
      from:{
        username:"",
        password:"",
        verify:"",
        svgKey:"",
      },
      svgImg:"",
      token:"",
    };
  },
  mounted() {
    this.getSvgImg();
  },
  methods: {
    getSvgImg(){
      loginApi.getCaptcha().then(res=>{
        console.log(res);
        this.svgImg = res.data.svgImg;
        this.from.svgKey = res.data.svgKey;
      }).catch(error=>{
        console.log(error);
      })
    },
    getLogin(){
      loginApi.login(this.from).then(res=>{
        console.log(res);
        this.token = res.data.result.token;
        localStorage.token=this.token;
        if(res.data.message="用户登录成功"){
          this.$router.push('/index');
        }else{
          alert("登陆失败");
        }
      }).catch(error=>{
        console.log(error);
      })
    }
  },
};
</script>

<style scoped >
.box{
  width: 100%;
  height: 100%;
  background-color: cornflowerblue;
  display: flex;
  align-items: center;
  justify-content: center;
}
.con{
  width: 800px;
  height: 350px;
  background-image: url('../assets/loginbg.jpg');
  background-size: 100% 100%;
  position: relative;
}
.img{
  position: absolute;
  top: 170px;
  left: 300px;
}
</style>
